import React, { useState, useEffect,useRef } from "react";
import { TabBar } from "antd-mobile";
import { Outlet, useLocation,useNavigate } from "react-router-dom";
import {
    AppOutline,
    MessageOutline,
    UnorderedListOutline,
    UserOutline,
    CalendarOutline
} from 'antd-mobile-icons';
import '../../css/zxx/Shou.css';

function Tabbar() {
   const navigate = useNavigate()
    const location = useLocation();
    const { pathname } = location;

    const tabs = [
        { key: '/tar/shou', title: '首页', icon: <AppOutline /> },
        { key: '/tar/shaix', title: '订单', icon: <UnorderedListOutline /> },
        { key: '/tar/cdate', title: '日历', icon: <CalendarOutline /> },
        { key: '/tar/xiaoxi/liao', title: '消息', icon: <MessageOutline /> },
        { key: '/tar/lmy', title: '我的', icon: <UserOutline /> },
    ];
    return (
        <>
        <Outlet></Outlet>
            <TabBar activeKey={pathname} onChange={(val)=>{
                navigate(val)
            }} className="zx-tabbar">
                {tabs.map(item => (
                    <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                ))}
            </TabBar>
        </>
    );
}

export default Tabbar;
